<template>
  <div class="cc">
  
<mu-container>
     <mu-appbar :z-depth="4" color="#F17C67">
    充值记录
  </mu-appbar>
  <mu-card style="">
  <mu-paper :z-depth="4" >
    <mu-data-table height="500" stripe :columns="columns" :sort.sync="sort" @sort-change="handleSortChange" :data="list">
      <template slot="header" slot-scope="scope">
        <tr>
          <th rowspan="2" class="is-center tdc">时间  </th>
          <th rowspan="2" class="is-center tdc">金额</th>
        </tr>
      </template>  
      <template slot-scope="scope">
        <td class="tdc">{{scope.row.name}}</td>
        <td class="is-center tdc">{{scope.row.calories}}</td>
      </template>
    </mu-data-table>
  </mu-paper>
  </mu-card>
</mu-container>
  
  </div>
</template>


<script>
 export default {
  data () {
    return {
      sort: {
        name: '',
        order: 'asc'
      },
      columns: [
          { title: '时间', name: 'name' },
          { title: '充值金额', name: 'calories',  align: 'center', sortable: true },
      ],
      list: [
        {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: 1
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: 1
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: 7
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: 8
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: 16
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: 0
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: 2
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: 45
          }
      ]
    };
  },
  methods: {
    handleSortChange ({name, order}) {
      this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
    }
  },
  created(){
   
  }
};
</script>
<style scoped>
.cc{
  margin-top:8px;
}
.tdc{
   vertical-align: middle;
    text-align: center;  
}

</style>